<template>
	<view class="main">
		<view class="u-demo-block__content">
			<view class="u-page__tag-item">
				<u-search v-model="searchValue" @input="handleSearch"></u-search>
			</view>
		</view>
		<view class="top"></view>

		<view>
			<u-scroll-list indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c" @right="right" @left="left">
				<view class="scroll-list" style="flex-direction: row;">
					<view class="scroll-list__goods-item" v-for="(item, index) in goodsArr" :key="index"
						:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']">
						<image class="scroll-list__goods-item__image" :src="goodsBaseUrl + item.thumbnail" mode="">
						</image>
						<text class="scroll-list__goods-item__text">￥{{ item.price }}</text>
					</view>
					<view class="scroll-list__show-more" @tap="showMore">
						<text class="scroll-list__show-more__text">查看更多</text>
						<u-icon name="arrow-leftward" color="#f56c6c" size="12"></u-icon>
					</view>
				</view>
			</u-scroll-list>
		</view>

		<view class="u-page">
			<u-list @scrolltolower="scrolltolower">
				<view v-if="searchValue && filteredList.length === 0" class="empty-container">
				          <text>没有找到相关商品</text>
				        </view>
				<u-list-item v-for="(item, index) in filteredList" :key="index" class="listItem">
					<view class="flex-container" @click="goToSecKill(item)">
						<u--image width="120" height="120" class="list-img"
							src="http://1.94.233.8:19000/education-bucket/7beb3ccc-6caa-4459-bce9-98ef5e37b7da.jpg"></u--image>
						<view class="infoItem">
							{{ item.title || '商品信息' }}
							<view class="price-btn-container">
								<view style="margin-right: 50px;">￥{{(item.seckillPrice || 0).toFixed(2)}}</view>
								<u-button style="width: 80px;height: 30px;margin-right: 0;" shape="circle"
									color="orange" >立即抢购</u-button>
							</view>
							<view class="sold-container">
								<text class="line-through">￥{{(item.price || 0).toFixed(2)}}</text>

								<u-line-progress :percentage="item.soldCount/item.totalLimit*100">
								</u-line-progress>
							</view>
						</view>
					</view>
				</u-list-item>
				<!-- 加载状态提示 -->
				<view v-if="isLoading" class="loading-container">
					<text>加载中...</text>
				</view>
				<view v-if="hasReachedEnd" class="end-container">
					<text>已经到底啦</text>
				</view>
			</u-list>

		</view>
	</view>
</template>

<script>
	import {
		getAllSecKill
	} from '@/api/seckill.js'
	export default {
		data() {
			return {
				goodsBaseUrl: 'https://cdn.uviewui.com/uview/goods/',
				baseUrl: 'http://localhost:8011',
				goodsArr: [{
						price: '230.5',
						thumbnail: '1.jpg'
					},
					{
						price: '74.1',
						thumbnail: '2.jpg'
					},
					{
						price: '8457',
						thumbnail: '6.jpg'
					},
					{
						price: '1442',
						thumbnail: '5.jpg'
					},
					{
						price: '541',
						thumbnail: '2.jpg'
					},
					{
						price: '234',
						thumbnail: '3.jpg'
					},
					{
						price: '562',
						thumbnail: '4.jpg'
					},
					{
						price: '251.5',
						thumbnail: '1.jpg'
					}
				],
				indexList: [],
				seckList: [],
				isLoading: false, // 加载状态
				hasReachedEnd: false, // 是否已到达加载终点
				page: 1, // 当前页码
				pageSize: 20, // 每页数据量
				maxPage: 0, // 最大页数
				searchValue: '',
				originalList: [], // 原始数据副本
				      filteredList: []  // 过滤后的结果

			}
		},
		created() {
			
		},
		onLoad() {
			this.handleAllSecKill();
		},
		methods: {
			async handleAllSecKill() {
			  try {
			      console.log("查询所有的秒杀");
			      
			      const res = await uni.request({
			        url: `${this.baseUrl}/seckill/getAllSecKill`, 
			        method: 'GET'
			      });
			      if (res.data.code !== 200) {
			        throw new Error(`请求失败，状态码: ${res.statusCode}`);
			      }
			      
			      
			      this.seckList = res.data.data.allSecKill;
			      this.maxPage = Math.ceil(this.seckList.length / this.pageSize);
			      this.originalList = [...this.seckList];
			      this.filteredList = [...this.seckList];
			      this.loadmore();
			      
			    } catch (err) {
			      console.log("查询失败", err);
			      uni.showToast({
			        title: "获取秒杀列表失败",
			        icon: "none"
			      });
			    }
			},
			goToSecKill(val){
				console.log(val);
				console.log("跳转秒杀详情页");
				 wx.setStorageSync('seckillId', val.seckillId);
				uni.navigateTo({
					url: '/pages/seckill-detail/seckill-detail'
				});
				
			},
			showMore() {  
				uni.$u.toast('查看更多')
			},
			left() {
				console.log('left');
			},
			right() {
				console.log('right');
			},
			
			//搜索框搜索
			handleSearch() {
			      if (!this.searchValue) {
			        // 搜索框为空时显示全部数据
			        this.filteredList = [...this.originalList];
			        return;
			      }
			      
			      // 过滤数据
			      const searchTerm = this.searchValue.toLowerCase();
			      this.filteredList = this.originalList.filter(item => {
			        return item.title && item.title.toLowerCase().includes(searchTerm);
			      });
			    },
			// 列表List
			// 列表滚动到底部事件
			handleScrollToLower() {
				// 只有在不是加载中且未到达最大页数时才加载
				if (!this.isLoading && !this.hasReachedEnd) {
					this.loadmore();
				}
			},
			scrolltolower() {
				this.loadmore();
			},
			loadmore() {
				// 到达最大页数时停止
				    if (this.page > this.maxPage) {
				        this.hasReachedEnd = true;
				        return;
				    }
				
				    this.isLoading = true;
				    
				    // 计算当前页的数据范围
				    const start = (this.page - 1) * this.pageSize;
				    const end = start + this.pageSize;
				    // 从seckList中切片当前页的数据
				    const currentPageData = this.seckList.slice(start, end);
				    
				    // 将数据添加到indexList
				    this.indexList = [
				        ...this.indexList,
				        ...currentPageData
				    ];
				
				    this.page++;
				    this.isLoading = false;
				
				    // 检查是否已加载全部数据
				    if (this.page > this.maxPage) {
				        this.hasReachedEnd = true;
				    }
			},
		}
	}
</script>

<style lang="scss">
	.main {
		height: 100%;

		.top {

			height: 20vh;
			background-image: url(http://1.94.233.8:19000/education-bucket/7beb3ccc-6caa-4459-bce9-98ef5e37b7da.jpg);
			background-size: cover;
			background-repeat: no-repeat;
		}
	}

	.scroll-list {
		@include flex(column);

		&__goods-item {
			margin-right: 20px;

			&__image {
				width: 60px;
				height: 60px;
				border-radius: 4px;
			}

			&__text {
				color: #f56c6c;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
			}
		}

		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;

			&__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}

		&__line {
			@include flex;
			margin-top: 10px;

			&__item {
				margin-right: 15px;

				&__image {
					width: 61px;
					height: 48px;
				}

				&__text {
					margin-top: 5px;
					color: $u-content-color;
					font-size: 12px;
					text-align: center;
				}

				&--no-margin-right {
					margin-right: 0;
				}
			}
		}
	}

	.flex-container {
		display: flex;
		align-items: center;
		padding: 15px 0;
	}


	.list-img {
		margin: 0 15px;
	}


	::v-deep .infoItem {
		flex: 1;
		max-width: 320px;
		display: block;
		flex-direction: column;
		justify-content: center;
		padding-right: 15px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;

	}


	.loading-container,
	.end-container {
		text-align: center;
		padding: 15px 0;
		color: #999;
		font-size: 14px;
	}


	.listItem {
		border-bottom: 1px solid #eee;
	}

	.price-btn-container {
		display: flex;
		font-size: 18px;
		color: #f56c6c;
		font-weight: bold;

		margin-top: 10px;
		align-items: center;


	}

	.sold-container {
		font-size: 15px;
		color: #999;
		margin-top: 10px;
		align-items: center;
		text-align: left;
	}

	.line-through {
		text-decoration: line-through;
		
	}
	.empty-container {
	  text-align: center;
	  padding: 30px 0;
	  color: #999;
	  font-size: 14px;
	}
</style>